<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <!--1、头部-->
    <head th:replace="common/front_fragment::head(分类页面)">
        <meta charset="UTF-8">
        <!--移动端的：缩放-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
        <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
        <title>分类页面</title>
    </head>

    <!--2、、js引用-->
    <div th:replace="common/front_fragment::myJs">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js" th:src="@{/js/semantic.js}"></script>
    </div>

    <!--3、中间内容、底部footer-->
    <body class="bg-front">
        <div class="wrap">
            <div class="main">
                <!--3.1：导航栏-->
                <nav th:replace="~{common/front_fragment::nav(2)}"></nav>

                <!--3.2：中间内容-->
                <div class="m-container-middle m-padded-tb-big m-opacity m-phone-opacity">
                    <!--文章-->
                    <div class="ui container">  <!--拥有：响应式的效果-->
                        <!--头介绍-->
                        <div class="ui top attached segment border-radius" style="background: aliceblue">
                            <div class="ui middle aligned two column grid">
                                <div class="column">
                                    <h3 class="ui header span-front-font" style="color: #849dca !important;">分类</h3>
                                </div>

                                <div class="right aligned column">
                                    <span class="span-front-font" style="color: #849dca !important;">共</span> <span class="span-front-num" th:text="${#arrays.length(types)}"> 14 </span> <span class="span-front-font" style="color: #849dca !important;">类</span>
                                </div>
                            </div>
                        </div>

                         <!--分类-->
                        <div class="ui attached segment redius-bottom" th:unless="${null == types || types.size == 0}">
                            <div class="ui  labeled  button m-margin-tb-tiny" th:each="type : ${types}">
                                <a th:href="@{/front/types/{id}(id=${type.id})}" class="ui basic button" th:classappend="${currentTypeId == type.id} ? teal" th:text="${type.name}">
                                    人生路
                                </a>

                                <a th:href="@{/front/types/{id}(id=${type.id})}" href="#" class="ui  basic left pointing label" th:classappend="${currentTypeId == type.id} ? teal" th:text="${#arrays.length(type.blogs)}">
                                    22
                                </a>
                            </div>
                        </div>

                        <!--博客内容-->
                        <div class="ui segment title-front-redius" th:unless="${null == page.getList() || page.getList().size == 0}" th:each="blog : ${page.getList()}">
                            <div class="ui padded-lr-big vertical m-padded-tb-small  m-mobile-clear segment">
                                <div class="ui middle aligned mobile reversed stackable grid">
                                    <div class="eleven wide column m-padded-tb-small">
                                        <div class="title-header m-margin-bottom-middle"><a class="m-black" target="_blank" th:href="@{/front/blog/{id}(id=${blog.id})}" th:text="${blog.title}"></a></div>
                                        <p class="m-text m-margin-top-larger-px" th:text="|${blog.description}...|">
                                            随着岁月的境迁, 同学们的差距会越来越来大？这是什么原因呢？ 很大程度上，读书阶段就已经造就了这种局面。
                                            我想这便是自我约束力的丧失。导致生活任意妄为， 浑浑噩噩，每天混迹于
                                        </p>

                                        <div class="ui m-margin-top-larger-px grid">
                                            <div class="thirteen wide column">
                                                <div class="ui mini horizontal link list">
                                                    <div class="item">
                                                        <img src="/images/avatar.jpg" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
                                                        <div class="content"><a th:href="@{/front/about}" target="_blank" class="header" th:text="${blog.user.nickname}">洋洋洋</a></div>
                                                    </div>
                                                    <div class="item">
                                                        <i class="calendar icon"></i><span th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm')}">2021-03-02</span>
                                                    </div>
                                                    <div class="item">
                                                        <i class="eye icon"></i> <span th:text="${blog.views}">477</span>
                                                    </div>
                                                    <div class="item">
                                                        <i class="comment outline icon"></i><span th:text="${blog.commentNum}">5</span>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="right aligned three wide column">
                                                <a target="_blank" class="ui teal basic label m-padded-tiny m-text-thin font-spacing" th:text="${blog.type.name}">框架底层原理</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="five wide column">
                                        <a href="#" th:href="@{/front/blog/{id}(id=${blog.id})}" target="_blank">
                                            <img th:src="@{${blog.firstPicture}}" alt="" class="ui rounded image">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--新版换页-->
                        <div class="ui pagination menu" style="width: 100%" th:unless="${null == page.getList() || page.getList().size() == 0}">
                            <!--上一页-->
                            <a class="item left aligned" th:href="@{/front/types(myid=${currentTypeId},pagenum=${page.getPageNum()-1}, pagesize=${page.pageSize})}" th:styleappend="${page.isIsFirstPage()} ? 'cursor: not-allowed'" th:onclick="${page.isIsFirstPage()} ? 'return false'">
                                <i class="left arrow icon"></i> Previous
                            </a>


                            <!--页码索引-->
                            <div class="item " th:classappend="${page.getPageNum()} == ${pageNum} ? 'active'" th:each="pageNum:${page.navigatepageNums}" style="padding: 2px 7px 2px 7px">
                                <a th:onclick="${page.getPages() <= 1} ? 'return false'" style="line-height: 24px; margin: 0; background: #87ceeb" class="ui circular label  pageBtn" th:href="@{/front/types(myid=${currentTypeId},pagenum=${pageNum}, pagesize=${page.pageSize})}" th:text="${pageNum}" th:classappend="${page.getPageNum()} == ${pageNum} ? 'myRed'">2</a>
                            </div>

                            <!--下一页-->
                            <a class="item right aligned" th:href="@{/front/types(myid=${currentTypeId}, pagenum=${page.getPageNum()+1}, pagesize=${page.pageSize})}" th:styleappend="${page.isIsLastPage()} ? 'cursor: not-allowed'" th:onclick="${page.isIsLastPage()} ? 'return false'">
                                Next  <i class="icon right arrow"></i>
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!--3.3：底部footer-->
<!--        <footer th:replace="common/front_fragment::footer"></footer>-->
    </body>

    <!--4、手机端：菜单点击按钮（JS）-->
    <script>
        $('.menu.toggle').click(function(){
            $('.m-item').toggleClass('m-mobile-hide');
        });
    </script>
</html>